<template>
	<view class="top_bar">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="top" v-if="isBack">
			<view class="back">
				<text class="iconfont icon-zuo" @click="toBack" :style="{color: iconColor}"></text>
				<text v-if="title">{{ title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			iconColor: {
				type: String,
				default: 'black'
			},
			title: {
				type: String,
				default: ''
			},
			isBack: {
				type: Boolean,
				default: true
			} 
		},
		methods: {
			// 点击返回上一页按钮时触发
			toBack() {
				uni.navigateBack({
					delta:1
				})
			},
		}
	}
</script>

<style lang="scss">
	.top_bar {
		// 手机状态栏占位样式 uni 给的 手机状态栏的高度样式变量
		.status_bar {
			height: var(--status-bar-height);
			width: 100%;
		}
		.top {
			position: relative;
			height: 60rpx;
			// 返回按钮
			.back {
				position: absolute;
				left: 20rpx;
				top: 15rpx;
				z-index: 100;
				>text {
					font-size: 40rpx;
					font-weight: bold;
				}
			}
		}
	}
</style>
